<template>
  <div v-if="is_info" v-html="content"></div>
  <div v-else class="form_item-select_one" style="min-width: 200px;">
    <input type="hidden" :name="name" :value="value">
    <el-cascader v-if="has_children" v-model="this_value" name="" :size="size" :options="options" :props="props" @change="update_arr" style="width: 100%;" />
    <el-select v-else v-model="this_value" name="" :size="size" @change="update_value" style="width: 100%;" :placeholder="placeholder">
      <el-option v-for="row in options" :value="row.value" :label="row.label"></el-option>
    </el-select>
  </div>
</template>

<script>
import s94Mjs from "s94-js";
import {decode_config} from "@/js/s94_tool.js";

export default {
  _title_: '下拉单选',
  _can_config_: true,
  _can_form_param_public_: true,
  _can_form_param_: true,
  _can_where_param_: true,
  name: "select_one",
  props: ['name', 'value', 'config', 'is_info', 'can_select_parent', 'size', 'is_list', 'placeholder'],
  emits: ['update:value', 'change'],
  data(){
    return {
      need_display: true,
      this_value: s94Mjs.to_string(this.value),
      has_children: false,
      props: {checkStrictly: !!this.can_select_parent}
    }
  },
  methods: {
    update_value(v){
      this.need_display = false;
      setTimeout(()=>{this.need_display = true;},5);
      this.$emit('update:value', v);
      this.$emit('change', v);
    },
    update_arr(arr){
      let len = arr.length;
      this.update_value(arr[len-1]);
    },
  },
  watch: {
    value(){
      if (!this.need_display) return;
      this.this_value = s94Mjs.to_string(this.value);
    }
  },
  computed: {
    options(){
      let config = decode_config(this.config);
      let has_children = false;
      s94Mjs.eachloop(config, 'children', function (row){
        has_children = has_children || (Array.isArray(row['children']) && row['children'].length);
        row.label = row.content;
        return true;
      })
      this.has_children = has_children;
      return config;
    },
    content(){
      let val = this.this_value, res=this.this_value;
      s94Mjs.eachloop(this.options, 'children', function(row){
        let eq = val == row.value;
        if(eq) res = row.content;
        return !eq;
      })
      return res;
    },
  },
}
</script>

<style scoped>

</style>